.meetings-landing-page(ng-controller='meetingsLandingPageController')
  nav.navbar.navbar-default.navbar-fixed-top
    .github-fork-ribbon-wrapper.right.hidden-xs
      .github-fork-ribbon
        a(href='https://github.com/linagora/hublin', target='_blank') Fork me on GitHub
    .container-fluid
      .navbar-header.page-scroll
        span.navbar-brand.page-scroll
          span.logo-hublin Hubl
          span.gray-lighter .in
          span.beta-overlay Beta
      #bs-example-navbar-collapse-1.collapse.navbar-collapse
        ul.nav.navbar-nav.navbar-right
  section.create.text-center
    div.create-conference-div
      h2.tagline #{__('An easy and free VideoChat service')}
    .supported
      conference-create-form.conference-box(bs-affix data-offset-top="200")
    .unsupported-mini.text-center
      include ../../commons/unsupported-mini
  section.quickstart#quickstart
    .container
      .row.text-center
        .col-lg-12
          h2 #{__('Start with Hubl.in!')}
      .row.text-center
        .col-md-3
          a(href='/images/landing_roomName.png', data-lightbox="quickstart", data-title="#{__('Choose a new room name or stay with the default. Fancy or random ? The choice is yours.')}")
            img(src='/images/landing_roomName_thumb.png', data-lightbox="landing_roomName_thumb")
          p #{__('Choose a new room name or stay with the default. Fancy or random ? The choice is yours.')}
        .col-md-3
          a(href='/images/landing_allowUserMedia.png', data-lightbox="quickstart", data-title="#{__('Allow your browser to use your camera and microphone. It seems that 100% of video conferences are more efficient with sound and video.')}")
            img(src='/images/landing_allowUserMedia_thumb.png')
          p #{__('Allow your browser to use your camera and microphone. It seems that 100% of video conferences are more efficient with sound and video.')}
        .col-md-3
          a(href='/images/landing_inviteContacts.png', data-lightbox="quickstart", data-title="#{__('You\'re in! Invite your contacts to join the room: your contacts can invite their own contacts, who can invite their own contacts...')}")
            img(src='/images/landing_inviteContacts_thumb.png', data-lightbox="landing_inviteContacts")
          p #{__('You\'re in! Invite your contacts to join the room: your contacts can invite their own contacts, who can invite their own contacts...')}
        .col-md-3
          a(href='/images/landing_enjoy.png', data-lightbox="quickstart", data-title="#{__('Enjoy! Use Hubl.in up to 9 attendees from your desktop, smartphone or tablet. It\'s open, free, easy to use and always available.')}")
            img(src='/images/landing_enjoy_thumb.png', data-lightbox="landing_enjoy")
          p #{__('Enjoy! Use Hubl.in up to 9 attendees from your desktop, smartphone or tablet. It\'s open, free, easy to use and always available.')}
  section.about.bg-light-gray#about
    .container
      .row
        .col-lg-12.text-center
          h2.section-heading #{__('What is Hubl.in?')}
          h3.section-subheading.text-muted #{__('Hubl.in is a free and open source video conference solution built with love and designed with ethics in mind. It\'s the best way to initiate a communication anywhere with anybody and brings real time conversation to the next level. Hubl.in allows free communication without additional plugins. If you can read this page, you probably can use Hubl.in right now. Give it a try!')}
      .row.text-center
        .col-md-4
          span.fa-stack.fa-4x
            i.fa.fa-square.fa-stack-2x.text-primary
            i.fa.fa-sort-alpha-asc.fa-stack-1x.fa-inverse
          h4.service-heading #{__('Complete')}
          p.text-muted #{__('Simple but full featured: temporarily disable your microphone or camera, invite easily your guests, switch camera between attendees and much more!')}
        .col-md-4
          span.fa-stack.fa-4x
            i.fa.fa-square.fa-stack-2x.text-primary
            i.fa.fa-user-secret.fa-stack-1x.fa-inverse
          h4.service-heading #{__('Safe')}
          p.text-muted!= __j('Based on %s which allows decentralized communication between browsers. Your video conference is not streamed to Hubl.in in any way.', "a(href='#webRTCModal', data-toggle='modal') WebRTC")
        .col-md-4
          span.fa-stack.fa-4x
            i.fa.fa-square.fa-stack-2x.text-primary
            i.fa.fa-code.fa-stack-1x.fa-inverse
          h4.service-heading #{__('Open Source')}
          p.text-muted!= __j('Strongly involved in open source philosophy, Hubl.in is made available in the respect of its users. Feel free to look into, react to or contribute to the code on %s', "#[a.fa.fa-github(href='http://github.com/linagora/hublin' target='_blank') Github]")
  section.social#social
    .container
      .row
        .col-lg-6.text-justify
          h2 #{__('About us')}
          h4
            a(href='http://open-paas.org')
              img(src='../../images/oplogo.png')
          p!= __j('Hubl.in is a video conference service provided by %s, the open social platform. As the OpenPaaS team, we are pleased to separate this service from our main product and let everyone enjoy it. We are enthusiastic open source developers and we hope you will love Hubl.in as much as we do. We are respectful of free and open source philosophy and standards, for us community contributions are like Christmas presents. Feel free to get in touch with us!', "a(href='http://open-paas.org') Open-PaaS")
          h4
            a(href='http://linagora.com')
              img(src='../../images/linagora.png')
          p!= __j('%s being a fervent supporter of the free and open source world, offers its developers the opportunity to participate in its awesome free and open source projects, such as Hubl.in.', "a(href='http://linagora.com') Linagora")
        .col-lg-6.text-center
          h2 #{__('Follow Us!')}
          ul.social-buttons
            li
              a(href='https://www.youtube.com/channel/UCgCZPNq1-g49VfOaxjbExlg' rel='youtube' target='_blank' )
                span.fa-stack
                  i.fa.fa-square.fa-stack-2x
                  i.fa.fa-youtube
            li
              a(href='http://twitter.com/AwesomePaaS' rel='twitter' target='_blank')
                span.fa-stack
                  i.fa.fa-square.fa-stack-2x
                  i.fa.fa-twitter
            li
              a(href='https://www.facebook.com/Linagora' rel='facebook' target='_blank')
                span.fa-stack
                  i.fa.fa-square.fa-stack-2x
                  i.fa.fa-facebook-square
            li
              a(href='http://github.com/linagora/hublin' rel='github' target='_blank')
                span.fa-stack
                  i.fa.fa-square.fa-stack-2x
                  i.fa.fa-github-alt
  section.contact#contact
    .container
      .row
        .col-lg-12.text-center
          h2.section-heading #{__('Leave us a message')}
          h3.section-subheading.text-muted #{__('We love feedback!')}
      .row
        .col-lg-12
          form.feedback-form(ng-submit='sendFeedback()')
            .row
              .col-md-6
                .form-group
                  input#name.form-control(type='text', ng-model='feedbackForm.name', placeholder="#{__('Your Name')} *", required='', data-validation-required-message="#{__('Please enter your name.')}")
                  p.help-block.text-danger
                .form-group
                  input#email.form-control(type='email', ng-model='feedbackForm.email', placeholder="#{__('Your Email')} *", required='', data-validation-required-message="#{__('Please enter your email address.')}")
                  p.help-block.text-danger
              .col-md-6
                .form-group
                  textarea#message.form-control(placeholder="#{__('Your Message')} *", ng-model='feedbackForm.text', required='', data-validation-required-message="#{__('Please enter a message.')}")
                  p.help-block.text-danger
              .clearfix
              .col-lg-12.text-center
                #success
                button.btn.btn-xl(type='submit', ng-disabled='sendingFeedbackFrom') #{__('Send Message')}
  footer
    .container
      .row
        .col-md-6
          span.copyright
            | Copyright &copy; Linagora 2016 -&nbsp;
            != __j('%s is powered by %s', "a(href='http://open-paas.org') OpenPaaS", "a(href='http://linagora.com') Linagora")
        .col-md-6
          ul.list-inline.quicklinks
            li
              a(href="#privacyPolicy" data-toggle="modal") #{__('Privacy Policy')} / #{__('Terms of Use')}
  #webRTCModal.full-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
    .modal-content
      .close-modal(data-dismiss='modal')
        .lr
          .rl
      .container
        .row
          .col-lg-8.col-lg-offset-2
            .modal-body
              span.fa-stack.fa-4x
                i.fa.fa-square.fa-stack-2x.text-primary
                i.fa.fa-video-camera.fa-stack-1x.fa-inverse
              h2 Web RTC
              p.item-intro.text-muted Web Real-Time Communication
              p #{__('WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.')}
              p!= __j('Take a look at %s for more information', "a(href='http://www.webrtc.org/') WebRTC.org")
              button.btn.btn-primary(type='button', data-dismiss='modal')
                i.fa.fa-times
                | #{__('Close')}
  #privacyPolicy.full-modal.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
    .modal-content.left
      .close-modal(data-dismiss='modal')
        .lr
          .rl
      .container
        .row
          .col-lg-12
            .modal-body
              span.fa-stack.fa-4x
                i.fa.fa-square.fa-stack-2x.text-primary
                i.fa.fa-user-secret.fa-stack-1x.fa-inverse
              p !{termsOfService}
              button.btn.btn-primary(type='button', data-dismiss='modal')
                i.fa.fa-times
                | #{__('Close')}
  script(src='js/thirdparty/animatedheader.js')
